// 个人中心页面
<template>
  <div id="startExam">
    <div class="title">个人中心</div>
    <section class="content-el">
      <el-form :model="personalForm" ref="personalForm" label-width="100px" class="demo-form">
        <el-form-item
          prop="studentName"
          label="姓名">
          <!--<el-input v-model="personalForm.username"></el-input>-->
          <span>{{ personalForm.studentName }}</span>
        </el-form-item>

        <el-form-item
          prop="sex"
          label="性别">
          <!--<el-input v-model="personalForm.password"></el-input>-->
          <span>{{ personalForm.sex }}</span>
        </el-form-item>

        <el-form-item
          prop="institute"
          label="学院">
          <!--<el-input v-model="personalForm.password"></el-input>-->
          <span>{{ personalForm.institute }}</span>
        </el-form-item>
        <el-form-item
          prop="major"
          label="所属专业">
          <!--<el-input v-model="personalForm.password"></el-input>-->
          <span>{{ personalForm.major }}</span>
        </el-form-item>
        <el-form-item
          prop="grade"
          label="年级">
          <!--<el-input v-model="personalForm.password"></el-input>-->
          <span>{{ personalForm.grade }}</span>
        </el-form-item>
        <el-form-item
          prop="clazz"
          label="班级">
          <!--<el-input v-model="personalForm.password"></el-input>-->
          <span>{{ personalForm.clazz }}</span>
        </el-form-item>
        <el-form-item
          prop="tel"
          label="电话号码">
          <!--<el-input v-model="personalForm.password"></el-input>-->
          <span>{{ personalForm.tel }}</span>
        </el-form-item>
        <el-form-item
          prop="cardId"
          label="身份证号">
          <!--<el-input v-model="personalForm.password"></el-input>-->
          <span>{{ personalForm.cardId }}</span>
        </el-form-item>
        <el-form-item
          prop="email"
          label="邮箱">
          <!--<el-input v-model="personalForm.password"></el-input>-->
          <span>{{ personalForm.email }}</span>
        </el-form-item>
        <el-form-item
          prop="pwd"
          label="密码">
          <el-input show-password width="100" v-model="personalForm.pwd"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="openDialog">编辑个人信息</el-button>
        </el-form-item>
      </el-form>
    </section>
    <div class="wrapper">
    </div>
    <!--编辑个人信息Dialog-->
    <el-dialog
      title="编辑个人信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

      <el-form :model="personInfo" ref="personInfo" label-width="100px" class="demo-form">
        <el-form-item
          prop="studentName"
          label="姓名">
          <el-input v-model="personInfo.studentName"></el-input>
        </el-form-item>

        <el-form-item
          prop="sex"
          label="性别">
          <el-input v-model="personInfo.sex"></el-input>
        </el-form-item>

        <el-form-item
          prop="institute"
          label="学院">
          <el-input v-model="personInfo.institute"></el-input>
        </el-form-item>
        <el-form-item
          prop="major"
          label="所属专业">
          <el-input v-model="personInfo.major"></el-input>
        </el-form-item>
        <el-form-item
          prop="grade"
          label="年级">
          <el-input v-model="personInfo.grade"></el-input>
        </el-form-item>
        <el-form-item
          prop="clazz"
          label="班级">
          <el-input v-model="personInfo.clazz"></el-input>
        </el-form-item>
        <el-form-item
          prop="tel"
          label="电话号码">
          <el-input v-model="personInfo.tel"></el-input>
        </el-form-item>
        <el-form-item
          prop="cardId"
          label="身份证号">
          <el-input v-model="personInfo.cardId"></el-input>
        </el-form-item>
        <el-form-item
          prop="email"
          label="邮箱">
          <el-input v-model="personInfo.email"></el-input>
        </el-form-item>
        <el-form-item
          prop="pwd"
          label="密码">
          <el-input show-password v-model="personInfo.pwd"></el-input>
        </el-form-item>
        <el-form-item
          prop="pwdConfirm"
          label="确认密码">
          <el-input show-password v-model="personInfo.pwdConfirm"></el-input>
        </el-form-item>

      </el-form>


      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'startExam',
  data() {
    return {
      dialogVisible: false,
      personInfo: {},
      personalForm: {}
    }
  },
  created() {
    this.init()

  },
  watch: {},
  methods: {
    init() {
      let studentId = this.$cookies.get("cid")
      this.$axios(`/api/student/${studentId}`).then(res => {
        console.log('res======', res)
        if (res.data.code == 200) {
          this.personalForm = res.data.data //数据加载完成去掉遮罩
        }
      })

    },
    openDialog() {
      this.dialogVisible = true
      this.personInfo = this.personalForm
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    submitForm() {
      let studentId = this.$cookies.get("cid")
      this.personInfo.studentId = studentId
      if (this.personInfo.pwd === this.personInfo.pwdConfirm) {
        this.$axios.put('/api/student/', this.personInfo).then(res => {
          console.log('res======update', res)
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.dialogVisible = false
            this.init()
          } else {
            this.$message.error('保存失败！')
          }
        })
      } else {
        this.$message.error('两次密码不一致')
      }


    }

  }
}
</script>


<style lang="scss" scoped>
.table {
  width: 980px;
  margin: 0 auto;

  .title {
    margin: 20px;
  }

  .content-el {
    background-color: #fff;
    padding: 20px;
  }
}

.demo-form {
  background: #ffffff;
  padding: 20px;
}

.pagination {
  padding: 20px 0px 30px 0px;

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}

.paper {
  h4 {
    cursor: pointer;
  }
}

.paper .item a {
  color: #000;
}

.wrapper .top .order {
  cursor: pointer;
}

.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.item .info i {
  margin-right: 5px;
  color: #0195ff;
}

.item .info span {
  margin-right: 14px;
}

.paper .item {
  width: 380px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
  transition: all 0.6s ease;
}

.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}

.paper .item .info {
  font-size: 14px;
  color: #88949b;
}

.paper .item .name {
  font-size: 14px;
  color: #88949b;
}

.paper * {
  margin: 20px 0;
}

.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}

.top .icon {
  position: relative;
}

.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

#startExam .search-li {
  margin-left: auto;
}

.top .search-li {
  margin-left: auto;
}

.top li {
  display: flex;
  align-items: center;
}

.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}

.wrapper .top {
  display: flex;
}

.wrapper .top li {
  margin: 20px;
}

#startExam {
  width: 980px;
  margin: 0 auto;
}

#startExam .title {
  margin: 20px;
}

#startExam .wrapper {
  background-color: #fff;
}

.wrapper .top .order {
  cursor: pointer;
}

.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.item .info i {
  margin-right: 5px;
  color: #0195ff;
}

.item .info span {
  margin-right: 14px;
}

.paper .item {
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
  transition: all 0.6s ease;
}

.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45)
}

.paper .item .info {
  font-size: 14px;
  color: #88949b;
}

.paper .item .name {
  font-size: 14px;
  color: #88949b;
}

.paper * {
  margin: 20px 0;
}

.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}

.top .icon {
  position: relative;
}

.wrapper .top {
  border-bottom: 1px solid #eee;
}

#startExam .search-li {
  margin-left: auto;
}

.top .search-li {
  margin-left: auto;
}

.top li {
  display: flex;
  align-items: center;
}

.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}

.wrapper .top {
  display: flex;
}

.wrapper .top li {
  margin: 20px;
}

#startExam {
  width: 980px;
  margin: 0 auto;
}

#startExam .title {
  margin: 20px;
}

#startExam .wrapper {
  background-color: #fff;
}
</style>
